<template>
  <div id="#loading-wrap1" class="warp">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>银行卡信息</span>
      </div>
      <div class="image-wrap">
        <div v-for="(item, index) in arr " :key="index">
          <ImageCard :label="item.label" :data="item.data" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
import ImageCard from './ImageCard.vue'

export default {
  components: {
    ImageCard
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0
    },
    curItem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loadingState: {},
      arr: []
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          setTimeout(() => {
            this.getInfo(this.id)
            this.openFullScreen2()
          }, 500)
        }
      }
    }
  },
  methods: {
    handleClose() {
      this.activeName = 'first'
      this.images = []
      this.firstConfig = []
      this.thirdConfig = []
      this.$emit('handleClose')
    },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        target: '#loading-wrap1'
      })
      this.loadingState = loading
    },

    getInfo(id) {
      request({ url: 'system/bankCard/' + id, method: 'get' }).then(res => {
        if (res.data) {
          // 处理第二个内容
          const config = [{ label: '银行卡正面', key: 'bankCardFront' }, { key: 'bankCardBack', label: '银行卡背面' }]
          config[0].data = [res.data.bankCardFront]
          config[1].data = [res.data.bankCardBack]
          this.arr = config
          console.log(config, '----')
        } else {
          this.arr = []
        }
      }).finally(() => {
        this.loadingState.close()
      })
    }
  }
}
</script>

<style scoped>
.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: rgb(246, 247, 250);
}

.image-wrap {
  width: 90%;
  /* border:  1px solid black; */
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.warp {
  min-height: 200px;
  /* background-color: red; */
}
</style>
